<template>
  <div>
    <Container>
      <div class="title_container">{{ selectData.title }}</div>
      <div class="img_container">
        <img :src="selectData.pic" />
      </div>
      <div class="item_container" v-html="selectData.content">
        {{ selectData.content }}
      </div>
    </Container>
  </div>
</template>
<script>
import qs from "qs";
import Container from "../../../components/container/Container"; //引入容器组件
export default {
  components: {
    Container, //容器组件
  },
  data() {
    return {
      selectData: [], //详情数据
    };
  },
  mounted() {
    let id = this.$route.query.params;
    console.log(id);
    this.$APIShow
      .selectedDetails(id)
      .then((res) => {
        console.log(res.data.data);
        this.selectData = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="scss" scoped>
.title_container {
  width: 80%;
  margin-left: 10%;
  height: 2rem;
  line-height: 2rem;
  text-align: left;
  text-align: center;
  white-space: nowrap; //强制不换行
  overflow: hidden; //超出部分隐藏
  text-overflow: ellipsis; //显示‘...’
  // background: red;
}
.img_container {
  width: 100%;
  height: 8rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  img {
    width: 95%;
    height: 100%;
    border-radius: 0.2rem;
  }
}
.item_container {
  width: 94%;
  margin-left: 3%;
  font-size: 0.7rem;
}
</style>